<template>
    <div style="background-color: #ffffff;margin-top: -59px;">
        <div class="img-div">
            <div>
                <img src="@/assets/img/logo_purple.png" class="logo-img">
                <img src="@/assets/img/流程.png" class="process-img">
            </div>
        </div>
        <div style="align-items: center">
            <div class="root-provider">
                <div style="border: 0px solid black; position: relative;
                    box-sizing: border-box; display: flex;
                    flex-direction: column; align-content: flex-start; flex-shrink: 0;align-items: center">
                    <div style="width: 1000px;">
                        <div class="header-wrapper">
                            <h2 class="header-title">订单信息</h2>
                        </div>
                        <div class="item-headers-wrap">
                            <el-image
                                    class="works-img"
                                    :src="imgUrl+order.filename"
                                    @click="clickImg">
                            </el-image>
                            <el-card style="height: 400px">
                                <h2 class="info-demands">{{order.demands.demands}}</h2>


                                <div style="margin-top: 10px;">
                                    <span class="label-label">总价</span>
                                    <span class="price">{{order.totalPrice}}</span>&nbsp;元
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">订单详情</span>
                                    <span class="">{{order.demands.requirements}}</span>
                                </div>
                                <div style="width: 100%;margin-bottom: 12px;border-top: 1px #A7A2A2 dotted;"></div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">分类</span>
                                    <span>{{order.demands.categoryName}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">风格</span>
                                    <span>{{order.demands.style}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">规格</span>
                                    <span>{{order.demands.specifications}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">格式</span>
                                    <span>{{order.demands.format}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">颜色模式</span>
                                    <span>{{order.demands.color}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">反馈间隔</span>
                                    <span>{{order.demands.feedbackInterval}}</span>
                                </div>
                                <div style="width: 100%;border-top: 1px #A7A2A2 dotted;"></div>

                                <div style="margin-top: 10px;">
                                    <span class="label-label">订单编号</span>
                                    <span class="">{{order.orderNum}}</span>
                                </div>
                            </el-card>


                        </div>

                    </div>

                    <el-card style="margin-top: 10px;width: 1000px;">
                        <h2 class="info-demands">发表评价</h2>
                        评价类型：
                        <el-radio v-model="radio" label="1">好评</el-radio>
                        <el-radio v-model="radio" label="0">中评</el-radio>
                        <el-radio v-model="radio" label="-1">差评</el-radio>
                        <br>
                        <br>
                        <span style="font-size:14px;font-weight: 600;">评价内容:</span>

                        <el-input placeholder="请输入对该订单的评价"
                                  type="textarea"
                                  maxlength="500"
                                  :autosize="{minRows: 3}"
                                  show-word-limit
                                  v-model="orderComment"
                        style="margin-top: 10px;">
                        </el-input>
                        <br>
                        <el-checkbox style="margin-top: 10px;" v-model="checked">匿名评价</el-checkbox>
                    </el-card>

                </div>
                <div class="submitOrder-container">
                    <div class="wrapper">

                        <el-button class="go-btn"
                                   style="background-color: rgb(173,179,251);"
                                   @click="submitComment">提交评论
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="visible" :close-on-click-modal="true">
            <img :src="imgUrl+order.filename">
        </el-dialog>
    </div>
</template>

<script setup>
import {addOrderComment, getOrderByOrderId} from "@/assets/api/ordersApi";
import {getOrderItemByOrderNum} from "@/assets/api/orderItemApi";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {getCurrentInstance, onBeforeMount, ref} from "vue";

const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
const route = useRoute();
const router = useRouter();
const order = ref({});
const visible = ref(false);
const textarea = ref('');
const radio = ref('1');
const orderComment = ref('');
const orderItem = ref('');
const checked = ref(true);

const getOrders = () => {
  let data = {};
  data.orderId = route.query.id;
  getOrderByOrderId(data).then((res) => {
    if (res.code === 200) {
      order.value = res.data;
      getOrderItem();
    }
  })
};
const getOrderItem = () => {
  let data = {};
  data.orderNum = order.orderNum.value;
  getOrderItemByOrderNum(data).then((res) => {
    orderItem.value = res.data;
  })
};
const submitComment = () => {
  let data = {};
  data.orderId = order.orderId.value;
  data.demandId = order.demands.demandId.value;
  data.orderItemId = orderItem.itemId.value;
  data.userId = localStorage.userId;
  data.isAnonymous = checked.value ? 1 : 0;
  data.commentType = parseInt(radio.value);
  data.orderCommentContent = orderComment.value;
  addOrderComment(data).then((res) => {
    if (res.code === 200) {
      ElMessage.success('评价成功！');
    }
    router.replace(`/myOrders`)
  })
};
const clickImg = () => {
  visible.value = true;
};

onBeforeMount(() => {
  getOrders();
});
</script>

<style scoped>
    .img-div {
        width: 1000px;
        position: relative;
        display: flex;
        margin: 0 auto 0 auto;
        text-align: center;
    }

    .process-img {
        width: 70%;
        height: 80%;
        margin-top: 30px;
        margin-left: 90px;
    }

    .works-img {
        width: 400px;
        height: 400px;
        border: 2px #f4f4f4 solid;
        float: left;
        cursor: pointer;
        margin-right: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .logo-img {
        float: left;
        z-index: 9;
        padding-top: 28px;
        height: 90px;
        line-height: 64px;
        position: relative;
    }

    .root-provider {
        min-height: 400px;
    }

    .header-wrapper {
        position: relative;
        margin-bottom: 15px;
    }

    .header-wrapper .header-title {
        line-height: 25px;
        color: #333;
        font-weight: 700;
        font-size: 14px;
    }

    .info-demands {
        line-height: 25px;
        font-weight: 700;
        padding: 3px 0;
        color: #000;
        font-size: 16px;
    }

    .label-label {
        float: left;
        color: #999;
        margin-right: 50px;
        width: 60px;
    }

    .price {
        font-size: 25px;
        vertical-align: center;
        font-weight: 700;
        color: #adb3fb;
    }

    .item-headers-wrap {
        margin-top: 15px;
        color: #6c6c6c;
    }

    .submitOrder-container {
        text-align: right;
        margin-top: -1px;
    }

    .submitOrder-container .wrapper {
        display: inline-block;
        padding: 0 0 5px 5px;
    }

    a {
        text-decoration: none;
        cursor: pointer;
    }

    .submitOrder-container .go-btn {
        display: inline-block;
        width: 182px;
        height: 39px;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-right: 280px;
        margin-top: 10px;
    }

    .comment-input {
        margin-top: 10px;
    }

    /deep/ .el-input__inner {
        line-height: 101px;
        height: 101px;
    }
</style>
